import React ,{useState}from 'react';
import logo from './logo.svg';
import useURLLoader from './hooks/useURLLoader';
import './App.css';
import LikeButton from './components/LikeButton';
import useMousePosition from './hooks/useMousePositions';

interface IShowResult {
  message: string;
  status: string;
}


const App:React.FC =() =>{
  const [show,setShow] = useState(true)
  //这里只要show的状态发生变化，就会重新加载；有点类似于useEffect
  const [data,loading] = useURLLoader("https://dog.ceo/api/breeds/image/random",[show])
  //改变一下data的类型
  const dogResult = data as IShowResult
  const position = useMousePosition()
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          <button onClick={()=>{setShow(!show)}}>Refresh Dog </button>
        </p>
        <LikeButton/>

        {
          loading ? <p>🐩 读取中</p>
          : <img src={dogResult && dogResult.message}/>
        }
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
